﻿/************************************************************************************************************
	RESET 
 ************************************************************************************************************/
* { 
	margin:0;
	padding:0;
}
IMG { 
	border:0;
}
EM,
STRONG {
	font-style:normal;
	font-weight:normal;
}
OL,
UL {
	list-style:none;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
INPUT.type_radio,
INPUT.type_checkbox {
	position: relative;
	bottom: -2px;
}
* HTML INPUT.type_radio,
* HTML INPUT.type_checkbox {
    position:static;
    bottom: 0;
}
/*A {
    text-decoration:none;
    -moz-outline-style:none;
}
A:hover{
    text-decoration:underline;
}*/
INPUT, TEXTAREA, SELECT {
    font: 12px arial;
    padding: 1px 2px;
}
OPTION {
    padding: 0 7px 0 3px;
}

/* new clearfix */
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
.imgfix {
	vertical-align: bottom;
}
.ir {
	display:block;
	text-indent:-9999px;
	overflow:hidden;
}

/************************************************************************************************************
	GENERAL
 ************************************************************************************************************/
HTML {
	direction: rtl;
}
BODY {
	background: 
		-webkit-gradient(linear, 0% 0%, 0% 80%, from(#343434), to(#4b4b4b)) no-repeat;
	font-family: Arial;
	padding: 0;
}

#container {
	width: 816px;
	margin: auto;
	/* to cut the sides of the box shadow*/
	overflow-x:hidden;
	min-height: 1140px;
}


/************************************************************************************************************
	HEADER
 ************************************************************************************************************/
#header {
	width: 100%; height: auto;	
	margin-bottom: 1em;	
	position:relative;
}
	.header-inner {		
		height: 250px;
		
		position:relative;
		width:100%;
		z-index:101;
	}		
		
		.header-inner .content {						
			background: url(../images/layout/header/visual.png) no-repeat right top;
			background-size: 100%;			
									
			xwidth: 800px;
			height:100%;
			padding-top:1px;
			text-align: center;
		}
		
		H1 {
			height:50px;			
		}
		H1 a {
			display:block;
			color:#000;
			text-decoration:none;
			
			height: 50px;
			background: url(../images/layout/header/titles/orange.png) no-repeat;
			background-position: 0px 5px;
			background-size: 125%;
			float: left;
			margin: 14px 0 0 20px;
						
			/*Live Text:*/
			font-size:36px;
			line-height:42px;
			text-align:left;        
			width: 374px; padding-left:135px;					
		}
				
		/* Set as homepage button */
		.header-inner .button-set-homepage {			
			/* button */			
			background-image: 
				-webkit-gradient(
					linear, left top, left bottom, 
					color-stop(0%, #ff8736), 
					color-stop(100%, #ea7121));
					
			border-radius: 6px;
			border: 1px solid #fcae55;					
			
			-webkit-box-shadow: 
				0 2px 2px 1px rgba(0, 0, 0, 0.27);			
					
			/*-webkit-box-shadow: 
				0 2px 10px 0px rgba(0, 0, 0, 0.5);*/
			
			/* size & position */
			float: right; margin-right: 2%; margin-top: 20px;
			width: 26%; line-height: 55px;
			
			/* text */			
			text-decoration: none; color: White;
			text-align: center; font-size: 25px; font-weight: bold;
			text-shadow: 0px -1px 2px rgba(170, 69, 0, 0.85);
		}		
		
		/* All Categories button */		
		.button-all-categories {						
			/* position */
			float: right; margin-right: 2%; margin-top: -30px;				
		}
		.button {
			/* button */			
			background-image: 
				-webkit-gradient(
					linear, left top, left bottom, 
					color-stop(0%, #e2e2e2), 
					color-stop(100%, #bbbbbb));
				
			border-radius: 6px;
			border: 1px solid #fff;					
		
			-webkit-box-shadow: 
				0 2px 2px 1px rgba(0, 0, 0, 0.27);
			
			/* size */			
			width: 24%; line-height: 55px;
			
			/* text */			
			text-decoration: none; color: #2c2c2c;
			text-align: center; font-size: 26px; font-weight: bold;
			text-shadow: 0px 1px 2px rgba(247, 247, 247, 1);
		}
		
		/* Banner */
		.header-inner .banner {			
			
		}
			.header-inner .banner IMG {
				display: block;
				margin: 15px auto 15px;
				border-radius: 5px;
				border: 1px solid #fd9f3b;
				height: 91px;
				overflow: hidden;					
				-webkit-box-shadow: 
					0 2px 10px 0px rgba(0, 0, 0, 0.5);
			}
			
 /************************************************************************************************************
	HEADER PEEK
 ************************************************************************************************************/
 #header.with-peek {
 	height:355px; 	
 }	
	.header-peek {
		/* box */
		position:absolute; top:0; z-index:-1;
		width:100%; height:100px;
		padding-top:230px;				
						
		/* text */		
		text-align:center;
		color:#fff;
		font-size:36px;
	}				
		.text.orange {
			color:#ff6600;
		}
				
		.header-peek > .cut > .highlight,
		.header-peek .content > .cut > .highlight {
			position:absolute;
			bottom:1px;
			width:100%; height:1px;
			background-color:#2f2f2f;
		}
		.header-peek > .cut > .shadow,
		.header-peek .content > .cut > .shadow {
			position:absolute;
			bottom:0px;
			width:100%; height:1px;
			background-color:#8b8b8b;
		}
		
/************************************************************************************************************
	BREAD CRUMBS
 ************************************************************************************************************/
 .bread-crumbs {
	padding-top:3px;
	margin-bottom:20px;
	border-radius:10px;
	background:
		-webkit-gradient(
			linear, left top, left bottom, 
			color-stop(0%, rgba(32, 32, 32, 1)), 
			color-stop(100%, rgba(41, 41, 41, 1)));
 }
	.bread-crumbs ul {
		border-radius:10px;
		padding:10px;
		background:
			-webkit-gradient(
				linear, left top, left bottom, 
				color-stop(0%, rgba(44, 44, 44, 1)), 
				color-stop(100%, rgba(51, 51, 51, 1)));
	}
		.bread-crumbs li {
			margin-left:15px;
			position:relative;
			float:right;
			visibility:visible;
		}
		
			.bread-crumbs .arrow {
				width:15px; height:45px;
				position:absolute;
				top:0; left:-15px;
				background:url(../images/layout/breadcrumbs.png) no-repeat left top;
			}
				
			.bread-crumbs li:last-child .arrow {
				display:none;
			}
		
			.bread-crumbs .mask {	
				float:right;
				padding:1px;
				overflow:hidden;
			}			
		
				.bread-crumbs .button-crumb {
					position:relative;
					left:-5px;
			
					padding:1.5px;
					-webkit-box-shadow: 0 0 1px 1px #222;				
					background:
						-webkit-gradient(
							linear, left top, left bottom, 
							color-stop(0%, rgba(88, 88, 88, 1)), 
							color-stop(100%, rgba(51, 51, 51, 1)));
				}
				.bread-crumbs .button-crumb,
				.bread-crumbs .button-crumb a {
					border-radius:5px;			
				}
		
					.bread-crumbs .button-crumb a {					
						display:block;				
						color:#fff;
						text-shadow: #000000 0px -1px 1px;
						font-size:24px;
						text-decoration:none;
						padding:6px 15px;						
						background:
							url(../images/layout/breadcrumbs.png) repeat-x right -45px,
							-webkit-gradient(
								linear, left top, left bottom, 
								color-stop(15%, rgba(41, 41, 41, 1)), 
								color-stop(100%, rgba(9, 9, 9, 1)));
					}
					
					.bread-crumbs li:last-child .button-crumb {
						padding:0;
						-webkit-box-shadow: 0px 0px 0px 0px #000;
						border-radius:0;
						background:none;
					}
						.bread-crumbs li:last-child .button-crumb a {
							color:#fff;							
							border-radius:0;
							background:none;
							padding:8px 5px;
						}

/************************************************************************************************************
	FOOTER
 ************************************************************************************************************/	
#footer .footer-inner {
	text-align: center;
	height: 74px;
	overflow: hidden;
	
	background-image: 
		-webkit-gradient(
			linear, left bottom, left top, 
			color-stop(0%, rgba(58, 58, 58, 1)), 
			color-stop(100%, rgba(58, 58, 58, 0)));
	
}
	#footer .footer-inner .nav li a {
		line-height:3em;
		font-size:1.6em;
	}

/************************************************************************************************************
	CONTENT
 ************************************************************************************************************/
#content {
	width: 95%;
	margin: 0 auto 3em auto;
}


/************************************************************************************************************
	NAVIGATION
 ************************************************************************************************************/
.nav {
	background: #141414;
	
	background-image: 
		-webkit-gradient(
			linear, left top, left bottom, 
			color-stop(0%, rgba(255, 255, 255, 0.09)), 
			color-stop(50%, rgba(204, 204, 204, 0.09)), 
			color-stop(100%, rgba(0, 0, 0, 0.09)));	
			
	-webkit-box-shadow: 
		0 -0.5em 1em -7px rgba(0, 0, 0, 0.4),
		0 0.5em 1em -7px rgba(0, 0, 0, 0.4);
	
	border-radius: 0.6em;
	padding: 1px 0;	
	margin-bottom: 3em;	
	position: relative;	
}
	.nav.bright {
		background-image: 
            -webkit-gradient(
                linear, left top, right bottom, 
                color-stop(0%, rgba(255, 255, 255, 0.3)), 
                color-stop(20%, rgba(255, 255, 255, 0))),             -webkit-gradient(
                linear, left top, left bottom, 
                color-stop(0%, #e0e0e0), 
                color-stop(100%, #c9c9c9));	
	}
	
	.nav UL {
	}

	.nav LI {		
		float: right;
		width:25%;
		/* highlight (from the left) */
		
		background-image: 
			-webkit-gradient(
				linear, left top, right top, 
				color-stop(0%, rgba(255, 255, 255, 0.04)), 
				color-stop(25%, rgba(255, 255, 255, 0))),
			
			-webkit-gradient(
				linear, left top, left bottom, 
				color-stop(0%, rgba(20, 20, 20, 0.4)), 
				color-stop(50%, rgba(20, 20, 20, 0)));
		
	}
		.nav.bright LI {
			background-image: 
                -webkit-gradient(
                    linear, left bottom, right top, 
                    color-stop(0%, rgba(255, 255, 255, 0.3)), 
                    color-stop(30%, rgba(255, 255, 255, 0)));
		}	
		
	.nav.grid5x2 LI,
	.nav.grid5x3 LI {
		width:20%;
	}
	
		/* Rounded corners to inner elements */
		.nav LI:first-child { -webkit-border-top-right-radius: 0.6em; }
		.nav LI:nth-child(4) { -webkit-border-top-left-radius: 0.6em; }
		.nav LI:nth-child(9) { -webkit-border-bottom-right-radius: 0.6em; }
		.nav LI:nth-child(12) { -webkit-border-bottom-left-radius: 0.6em; }
		
		.nav.grid5x2 LI:first-child { -webkit-border-top-right-radius: 0.6em; }
		.nav.grid5x2 LI:nth-child(5) { -webkit-border-top-left-radius: 0.6em; }
		.nav.grid5x2 LI:nth-child(6) { -webkit-border-bottom-right-radius: 0.6em; }
		.nav.grid5x2 LI:nth-child(10) { -webkit-border-bottom-left-radius: 0.6em; }
		
		.nav.grid5x3 LI:first-child { -webkit-border-top-right-radius: 0.6em; }
		.nav.grid5x3 LI:nth-child(5) { -webkit-border-top-left-radius: 0.6em; }
		.nav.grid5x3 LI:nth-child(11) { -webkit-border-bottom-right-radius: 0.6em; }
		.nav.grid5x3 LI:nth-child(15) { -webkit-border-bottom-left-radius: 0.6em; }
		
		.nav LI A {
			display: block;
			text-align: center;
			color: White;			
			font-size: 1.8em;
			line-height: 2.6em;
			text-decoration: none;
		}
			.nav.bright LI A {
				color:#252525;
			}
			
		.nav.grid5x2 LI A {
			font-size:1.9em;
			line-height:2.04em;			
		}
		
		/* my orange */
		.nav LI.my-orange A SPAN {
			color: #ff6600;
		}		
		
		/* External cuts */
		.nav .cut .shadow {
			height: 1px;
			display: block;
	
			background-image: 
				-webkit-gradient(
					linear, left top, right top, 
					color-stop(0%, rgba(0, 0, 0, 0)), 
					color-stop(50%, rgba(0, 0, 0, 1)), 
					color-stop(100%, rgba(0, 0, 0, 0)));
		}
		
		.nav .cut .highlight {
			height: 1px;
			display: block;
	
			background-image: 
				-webkit-gradient(
					linear, left top, right top, 
					color-stop(0%, rgba(116, 116, 116, 0)), 
					color-stop(50%, rgba(116, 116, 116, 1)), 
					color-stop(100%, rgba(116, 116, 116, 0)));
		}

		.nav .cut:first-child .highlight {
			height: 1px;
		}
		
		/*************** Inner cuts *****************/
		
		/* horizontal */
		.nav .inner-cut.horizontal .shadow {
			width: 100%; height: 1px;
			display: block;
			position: absolute;
			right: 0;
	
			background-image: 
				-webkit-gradient(
					linear, left top, right top, 
					color-stop(0%, rgba(5, 5, 5, 0)), 
					color-stop(50%, rgba(5, 5, 5, 1)), 
					color-stop(100%, rgba(5, 5, 5, 0)));
		}
		
		.nav .inner-cut.horizontal .highlight {
			width: 100%; height: 1px;
			display: block;
			position: absolute;
			right: 0;
	
			background-image: 
				-webkit-gradient(
					linear, left top, right top, 
					color-stop(0%, rgba(81, 81, 81, 0)), 
					color-stop(50%, rgba(81, 81, 81, 0.7)), 
					color-stop(100%, rgba(81, 81, 81, 0)));
		}
		
		.nav .inner-cut.horizontal .shadow:first-child { top: 4.8em; }
		.nav .inner-cut.horizontal .shadow:nth-child(2) { top: 9.4em; }
		.nav .inner-cut.horizontal .highlight:nth-child(3) { top: 4.8em; margin-top: 1px; }
		.nav .inner-cut.horizontal .highlight:nth-child(4) { top: 9.4em; margin-top: 1px; }
		
		.nav.grid5x2 .inner-cut.horizontal .shadow:first-child { top: 4em; }		
		.nav.grid5x2 .inner-cut.horizontal .highlight { top: 4em; margin-top: 1px; }		
		
		/* vertical */
		.nav .inner-cut.vertical .shadow {
			width: 1px; height: 100%;
			display: block;
			position: absolute;
			top: 0;
	
			background-image: 
				-webkit-gradient(
					linear, left top, left bottom, 
					color-stop(0%, rgba(5, 5, 5, 0)), 
					color-stop(50%, rgba(5, 5, 5, 1)), 
					color-stop(100%, rgba(5, 5, 5, 0)));
		}
		
		.nav .inner-cut.vertical .highlight {
			width: 1px; height: 100%;
			display: block;
			position: absolute;
			top: 0;
	
			background-image: 
				-webkit-gradient(
					linear, left top, left bottom, 
					color-stop(0%, rgba(81, 81, 81, 0)), 
					color-stop(50%, rgba(81, 81, 81, 0.7)), 
					color-stop(100%, rgba(81, 81, 81, 0)));
		}
		
		.nav .inner-cut.vertical .shadow:first-child { right: 25%; margin-right: 1px; }
		.nav .inner-cut.vertical .shadow:nth-child(2) { right: 50%; margin-right: 1px; }
		.nav .inner-cut.vertical .shadow:nth-child(3) { right: 75%; margin-right: 1px; }
		.nav .inner-cut.vertical .highlight:nth-child(4) { right: 25%; }
		.nav .inner-cut.vertical .highlight:nth-child(5) { right: 50%; }
		.nav .inner-cut.vertical .highlight:nth-child(6) { right: 75%; }
		
		.nav.grid5x2 .inner-cut.vertical .shadow:first-child,
		.nav.grid5x3 .inner-cut.vertical .shadow:first-child 
		{ right: 20%; margin-right: 1px; }
		
		.nav.grid5x2 .inner-cut.vertical .shadow:nth-child(2),
		.nav.grid5x3 .inner-cut.vertical .shadow:nth-child(2)
		 { right: 40%; margin-right: 1px; }
		 
		.nav.grid5x2 .inner-cut.vertical .shadow:nth-child(3),
		.nav.grid5x3 .inner-cut.vertical .shadow:nth-child(3) 
		{ right: 60%; margin-right: 1px; }
		
		.nav.grid5x2 .inner-cut.vertical .shadow:nth-child(4),
		.nav.grid5x3 .inner-cut.vertical .shadow:nth-child(4) 
		{ right: 80%; margin-right: 1px; }
		
		.nav.grid5x2 .inner-cut.vertical .highlight:nth-child(5),
		.nav.grid5x3 .inner-cut.vertical .highlight:nth-child(5)
		{ right: 20%; }
		
		.nav.grid5x2 .inner-cut.vertical .highlight:nth-child(6),
		.nav.grid5x3 .inner-cut.vertical .highlight:nth-child(6)
		{ right: 40%; }
		
		.nav.grid5x2 .inner-cut.vertical .highlight:nth-child(7),
		.nav.grid5x3 .inner-cut.vertical .highlight:nth-child(7) 
		{ right: 60%; }
		
		.nav.grid5x2 .inner-cut.vertical .highlight:nth-child(8),
		.nav.grid5x3 .inner-cut.vertical .highlight:nth-child(8)
		{ right: 80%; }
		

/************************************************************************************************************
	SUB NAVIGATION
 ************************************************************************************************************/		
#sub-nav.nav {
	display: inline-block;
	margin: auto;
	border-radius: 0.6em 0.6em 0 0;
	padding: 1px 0 0 0;
}
	#sub-nav.nav LI {
		width: 160px;
		border-bottom-right-radius: 0;
		border-bottom-left-radius: 0;
	}
		#sub-nav.nav LI:last-child {
			width:240px;
		}	
		
	#sub-nav.nav .inner-cut.vertical .shadow:nth-child(1),
	#sub-nav.nav .inner-cut.vertical .highlight:nth-child(3) {
		right:158px;
	}
	#sub-nav.nav .inner-cut.vertical .shadow:nth-child(2),
	#sub-nav.nav .inner-cut.vertical .highlight:nth-child(4) {
		right:318px;
	}
	
/************************************************************************************************************
	BOX LIST (list with header, footer, one item per row)
 ************************************************************************************************************/

.box-list {	
	background-image: 
		-webkit-gradient(
			linear, left top, left bottom, 
			color-stop(0%, rgba(46, 46, 46, 1)), 
			color-stop(20%, rgba(46, 46, 46, 0)));
	border-radius: 11px;	
	position: relative;
	margin-bottom: 50px;
}
	/* Header */
	.box-list H2 {
		background-image: 
			-webkit-gradient(
				linear, left top, left bottom, 
				color-stop(0%, #2b2b2b), 
				color-stop(100%, #373737));
				
		border: 1px solid #414141;
		border-radius: 10px;
		padding: 0 23px 10px 0;
		
		/* Text */
		font-size: 34px; color: white;	
		line-height: 68px; height: 68px;
		
		overflow: hidden;
	}
	
		.box-list H2 SPAN {
			font-size: 26px; font-weight: bold;
		}
		
		.box-list H2 .glow {
			position: absolute;
			z-index: 3;
			top: 0px; right: 0;
			width: 100%; height: 100px;
			background-image: 
				-webkit-gradient(
					radial, 
					85% -100%, 0, 
					85% -100%, 150, 
					from(rgba(140, 140, 140, 1)), to(rgba(116, 116, 116, 0))
				);
		}
		
	/* List */
	.box-list > UL {
		background: #ddd;
		border-radius: 11px;		
		border: 1px solid #8b8b8b;
		margin-top: -10px;	
		
		background-image: 
			-webkit-gradient(
				linear, left top, right bottom, 
				color-stop(0%, rgba(255, 255, 255, 0.3)), 
				color-stop(20%, rgba(255, 255, 255, 0))),
				
			-webkit-gradient(
				linear, left top, left bottom, 
				color-stop(0%, #e0e0e0), 
				color-stop(100%, #c9c9c9));		
			
		-webkit-box-shadow: 
			0 5px 15px -4px rgba(0, 0, 0, 0.6);
		
		position: relative;
		z-index: 2;
	}
		/* List item */
		.box-list > UL > LI {
			float: right;
			width: 33.33%; height: 400px;
			position: relative;
				
			background-image: 
				-webkit-gradient(
					linear, left bottom, right top, 
					color-stop(0%, rgba(255, 255, 255, 0.3)), 
					color-stop(30%, rgba(255, 255, 255, 0)));
		}
			.box-list:not(.generic) > UL > LI:nth-child(3) {
				border-bottom-left-radius: 10px;
			}
			
			/* Thumbnail */
			.box-list .thumb {
				background: -webkit-gradient(linear, 0% 68%, 0% 100%, from(#bfbfbf), to(#fafafa));
				border-radius: 0.7em;
				margin: 24px 17% 10px;
				padding: 2px;
				height: 170px; 				
				
				/*	
					Anchor inside should now be larger than .thumb

				overflow: hidden;
				position: relative;

				*/
			}
				.box-list .thumb IMG {
					border-radius: 0.7em;
					width: 100%;
				}
					/* Play link */
					.box-list .thumb .play {
						width: 86px; height: 86px;
						
					
						position: absolute;
						/*top: 24%; right: 24%;*/
						top:50%; right:50%;
						margin-top:-43px; margin-right:-43px;
						
						/*	
							Anchor inside should now be larger than .thumb */
						width:100%; height:100%;
						margin:0;
						top:0; right:0;						
					}
					.box-list .thumb .play-button {
					    	background-size: 35%;
					}
					.box-list .thumb .play.noplay {
						background:none !important;
					}
					.box-list .thumb .play-button.noplay {
						visibility: hidden;
					}
					
					/* Play button (just an element with the image) */
					.box-list .thumb .play-button {
					    background: url(../images/layout/box-list/button-play.png) no-repeat center;
					    display: block;
					    height: 165px;
				        margin: 28px 45px 0 0; /* top & right distance from edges of our UL - closest ancestor with position: relative */
					    position: absolute;
					    right: 0;
					    top: 0;
					    width: 165px;
					}
			/* Texts */
			.box-list .text {
				font-size: 29px;
				color: #111111;
				margin: 0 25px;
				text-align: center;
				line-height: 36px;
				display: block;
			}
				.box-list .text.title {
					font-weight: bold;
				}
				.box-list .text.title.large {
					font-weight: normal;					
					font-size: 56px;
					float:right;
					width:56%;
					line-height:1;
					padding-top:36px;
					margin-right:0;
				}
			/* Button */
			.box-list .button {
				position:absolute;
				display:block;
				width:80%;
				bottom:15px; right:50%;
				margin-right:-40%;
				line-height:42px;				
			}				
				
		/* Design Cuts */
		.box-list LI .cut .shadow {
			width: 2px; height: 100%;
			display: block;
			position: absolute;
			top: 0; left: 2px;
	
			background-image: 
				-webkit-gradient(
					linear, left top, left bottom, 
					color-stop(0%, rgba(154, 154, 154, 0)), 
					color-stop(50%, rgba(154, 154, 154, 1)), 
					color-stop(90%, #bbbbbb),
					color-stop(95%, #c9c9c9));
		}
		
		.box-list LI .cut .highlight {
			width: 2px; height: 100%;
			display: block;
			position: absolute;
			top: 0; left: 0;
	
			background-image: 
				-webkit-gradient(
					linear, left top, left bottom, 
					color-stop(0%, rgba(254, 254, 254, 0)), 
					color-stop(50%, rgba(254, 254, 254, 1)), 
					color-stop(80%, #d9d9d9),
					color-stop(95%, #c9c9c9));
		}				
		
			.box-list .cut.horizontal .shadow {
				width: 100%; height: 1px;
				display: block;
				position: absolute;
				top: 71px; right: 0;
				z-index: 4;
	
				background-image: 
					-webkit-gradient(
						linear, left top, right top, 
						color-stop(0%, rgba(154, 154, 154, 0)), 
						color-stop(50%, rgba(154, 154, 154, 0.8)), 
						color-stop(100%, rgba(154, 154, 154, 0)));
			}
			.box-list.one-item .cut.horizontal .shadow {
				top:0;
			}
		
			.box-list .cut.horizontal .highlight:nth-child(4) {
				top: 473px;
			}						
		
			.box-list .cut.horizontal .highlight {
				width: 100%; height: 1px;
				display: block;
				position: absolute;
				top: 72px; right: 0;
				z-index: 4;
	
				background-image: 
					-webkit-gradient(
						linear, left top, right top, 
						color-stop(0%, rgba(254, 254, 254, 0)), 
						color-stop(50%, rgba(255, 255, 255, 1)), 
						color-stop(100%, rgba(254, 254, 254, 0)));
			}
			.box-list.one-item .cut.horizontal .highlight {
				top:1px;
			}
		
			.box-list .cut.horizontal .shadow:nth-child(2) {
				top: 472px;
			}				
		
		.box-list .footer .cut .shadow {
			top: auto; bottom: -2px;
	
			background-image: 
				-webkit-gradient(
					linear, left top, right top, 
					color-stop(0%, rgba(0, 0, 0, 0)), 
					color-stop(50%, rgba(0, 0, 0, 1)), 
					color-stop(100%, rgba(0, 0, 0, 0)));
		}		


	.box-list .note {
		background: #ddd;
		border-radius: 11px;		
		border: 1px solid #8b8b8b;
		margin-top: 40px;	
		padding: 10px;
		
		background-image: 
			-webkit-gradient(
				linear, left top, right bottom, 
				color-stop(0%, rgba(255, 255, 255, 0.3)), 
				color-stop(20%, rgba(255, 255, 255, 0))),
				
			-webkit-gradient(
				linear, left top, left bottom, 
				color-stop(0%, #e0e0e0), 
				color-stop(100%, #c9c9c9));		
			
		-webkit-box-shadow: 
			0 5px 15px -4px rgba(0, 0, 0, 0.6);
		
		position: relative;
		z-index: 2;
		
		color: #333;
	}			

		.box-list .note a {
			color: #000;
			font-weight: bold;
		}
	
	.box-list .orange-note {
		color: #f60;
	}
	
	/* Footer */
	.box-list .footer {
		position: relative;
		z-index: 1;
		
		background-image: 
			-webkit-gradient(
				linear, left top, left bottom, 
				color-stop(0%, #cccccc), 
				color-stop(100%, #b8b8b8));
				
		margin-top: -10px; padding-top: 10px;
		
		height: 76px; line-height: 76px;
		
		border-bottom-right-radius: 7px;
		border-bottom-left-radius: 7px;		
			
		-webkit-box-shadow: 
			0 5px 15px -4px rgba(0, 0, 0, 0.6);
			
		/* text */
		text-align: left;
		font-weight: bold;
		font-size: 26px;
		color: #252525;
	}	
	
		.box-list .footer .button-more {			
			display:inline-block;
			float:left;
			width:97%; height:76px;
			margin-left:3%;
			background:none;
			text-decoration:none;
			color:inherit;
		}
			.box-list .footer .button-more .play {
				display:inline-block;
				width: 47px; height: 47px;
				position:relative;
				top:13px; right:auto;
				background: url(../images/layout/box-list/button-more.png) no-repeat;
				background-size: 100%;
			}
		
	.box-list .footer-down {
		text-align:center;
	}
		.box-list .footer-down .button-more {			
			float:none;			
			margin:0;
		}
			.box-list .footer-down .button-more .play {			
				margin: 0;
				background: url(../images/layout/box-list/button-more-down.png) no-repeat;						
			}


/************************************************************************************************************
	SQUARES
 ************************************************************************************************************/
.box-list.squares {
}
	.box-list.squares > UL LI {
		background: transparent;
		height: auto;
		padding-top: 20px;
		width: 30%;
		position:relative;
		right:5%;
	}
	
		.box-list.squares > UL LI:nth-last-child(1),
		.box-list.squares > UL LI:nth-last-child(2),
		.box-list.squares > UL LI:nth-last-child(3) {
			margin-bottom: 40px;
		}
	
		.box-list.squares > UL LI .thumb {
			height: 151px;
			
			background-image: 
				-webkit-gradient(
					linear, left top, left bottom, 
					color-stop(0%, #a1a1a1), 
					color-stop(100%, #474747));
		}
		
/************************************************************************************************************
	GENERIC BOX LIST - with five items per row or three. Links are smaller.
 ************************************************************************************************************/				
 .box-list.generic {
 }
	.box-list.generic LI {
		position: relative;
	}
	
	/* Box Bottom Cuts */
	.box-list.generic .cut.horizontal .shadow:nth-of-type(2) {
		top: auto; bottom: 2px;
	}
	.box-list.generic .cut.horizontal .highlight:nth-of-type(4) {
		top: auto; bottom: 1px;
	}
 
	/* Horizontal Cuts */
	.box-list.generic LI > .inner-cut.horizontal {
		position: absolute; bottom: 0; right: 0;
		width: 100%; height: 4px;
	}
		.box-list.generic LI > .inner-cut.horizontal .shadow {
			display: block; width: 100%; height: 2px;
			background: #909090;
		}
		.box-list.generic LI > .inner-cut.horizontal .highlight {
			display: block; width: 100%; height: 2px;
			background: #fff;
		}	
		
		/* Right column horizontal cuts are different. */
		.box-list.generic.five-in-row LI:nth-child(5n-4) > .inner-cut.horizontal .shadow,
		.box-list.generic.four-in-row LI:nth-child(4n-3) > .inner-cut.horizontal .shadow,
		.box-list.generic.three-in-row LI:nth-child(3n-2) > .inner-cut.horizontal .shadow {
			background-color: transparent;
			background-image: 
				-webkit-gradient(
					linear, left top, right top, 
					color-stop(0%, #909090), 
					color-stop(95%, rgba(128, 128, 128, 0)));	
		}
		.box-list.generic.five-in-row LI:nth-child(5n-4) > .inner-cut.horizontal .highlight,
		.box-list.generic.four-in-row LI:nth-child(4n-3) > .inner-cut.horizontal .highlight,
		.box-list.generic.three-in-row LI:nth-child(3n-2) > .inner-cut.horizontal .highlight {
			background-color: transparent;
			background-image: 
				-webkit-gradient(
					linear, left top, right top, 
					color-stop(0%, #fff), 
					color-stop(95%, rgba(255, 255, 255, 0)));
		}	
		
		/* Left column horizontal cuts are different. */
		.box-list.generic.five-in-row LI:nth-child(5n) > .inner-cut.horizontal .shadow,
		.box-list.generic.four-in-row LI:nth-child(4n) > .inner-cut.horizontal .shadow,
		.box-list.generic.three-in-row LI:nth-child(3n) > .inner-cut.horizontal .shadow {
			background-color: transparent;
			background-image: 
				-webkit-gradient(
					linear, left top, right top, 
					color-stop(5%, rgba(128, 128, 128, 0)), 
					color-stop(100%, #909090));	
		}
		.box-list.generic.five-in-row LI:nth-child(5n) > .inner-cut.horizontal .highlight,
		.box-list.generic.four-in-row LI:nth-child(4n) > .inner-cut.horizontal .highlight,
		.box-list.generic.three-in-row LI:nth-child(3n) > .inner-cut.horizontal .highlight {
			background-color: transparent;
			background-image: 
				-webkit-gradient(
					linear, left top, right top, 
					color-stop(5%, rgba(255, 255, 255, 0)), 
					color-stop(100%, #fff));
		}	
 
	/* Vertical Cuts */
	.box-list.generic LI > .inner-cut.vertical {
		position: absolute; top: 0; left: 0;
		width: 4px; height: 100%;
	}
		.box-list.generic LI > .inner-cut.vertical .shadow {
			display: block; width: 2px; height: 100%; float: left;
			background: #909090;
		}
		.box-list.generic LI > .inner-cut.vertical .highlight {
			display: block; width: 2px; height: 100%; float: left;
			background: #fff;
		}	
		
		/* First row vertical cuts are different. */
		.box-list.generic.five-in-row LI:nth-child(1) > .inner-cut.vertical .shadow,
		.box-list.generic.five-in-row LI:nth-child(2) > .inner-cut.vertical .shadow,
		.box-list.generic.five-in-row LI:nth-child(3) > .inner-cut.vertical .shadow,
		.box-list.generic.five-in-row LI:nth-child(4) > .inner-cut.vertical .shadow,
		.box-list.generic.five-in-row LI:nth-child(5) > .inner-cut.vertical .shadow,
		.box-list.generic.four-in-row LI:nth-child(1) > .inner-cut.vertical .shadow,
		.box-list.generic.four-in-row LI:nth-child(2) > .inner-cut.vertical .shadow,
		.box-list.generic.four-in-row LI:nth-child(3) > .inner-cut.vertical .shadow,
		.box-list.generic.four-in-row LI:nth-child(4) > .inner-cut.vertical .shadow,
		.box-list.generic.three-in-row LI:nth-child(1) > .inner-cut.vertical .shadow,
		.box-list.generic.three-in-row LI:nth-child(2) > .inner-cut.vertical .shadow,
		.box-list.generic.three-in-row LI:nth-child(3) > .inner-cut.vertical .shadow {
			background-color: transparent;
			background-image: 
				-webkit-gradient(
					linear, left top, left bottom, 
					color-stop(5%, rgba(128, 128, 128, 0)), 
					color-stop(100%, #909090));	
		}
		.box-list.generic.five-in-row LI:nth-child(1) > .inner-cut.vertical .highlight,
		.box-list.generic.five-in-row LI:nth-child(2) > .inner-cut.vertical .highlight,
		.box-list.generic.five-in-row LI:nth-child(3) > .inner-cut.vertical .highlight,
		.box-list.generic.five-in-row LI:nth-child(4) > .inner-cut.vertical .highlight,
		.box-list.generic.five-in-row LI:nth-child(5) > .inner-cut.vertical .highlight,
		.box-list.generic.four-in-row LI:nth-child(1) > .inner-cut.vertical .highlight,
		.box-list.generic.four-in-row LI:nth-child(2) > .inner-cut.vertical .highlight,
		.box-list.generic.four-in-row LI:nth-child(3) > .inner-cut.vertical .highlight,
		.box-list.generic.four-in-row LI:nth-child(4) > .inner-cut.vertical .highlight,
		.box-list.generic.three-in-row LI:nth-child(1) > .inner-cut.vertical .highlight,
		.box-list.generic.three-in-row LI:nth-child(2) > .inner-cut.vertical .highlight,
		.box-list.generic.three-in-row LI:nth-child(3) > .inner-cut.vertical .highlight {
			background-color: transparent;
			background-image: 
				-webkit-gradient(
					linear, left top, left bottom, 
					color-stop(5%, rgba(255, 255, 255, 0)), 
					color-stop(100%, #fff));
		}	
		
		/* Last row vertical cuts are different. */
		.box-list.generic.five-in-row LI:nth-last-child(1) > .inner-cut.vertical .shadow,
		.box-list.generic.five-in-row LI:nth-last-child(2) > .inner-cut.vertical .shadow,
		.box-list.generic.five-in-row LI:nth-last-child(3) > .inner-cut.vertical .shadow,
		.box-list.generic.five-in-row LI:nth-last-child(4) > .inner-cut.vertical .shadow,
		.box-list.generic.five-in-row LI:nth-last-child(5) > .inner-cut.vertical .shadow,
		.box-list.generic.four-in-row LI:nth-last-child(1) > .inner-cut.vertical .shadow,
		.box-list.generic.four-in-row LI:nth-last-child(2) > .inner-cut.vertical .shadow,
		.box-list.generic.four-in-row LI:nth-last-child(3) > .inner-cut.vertical .shadow,
		.box-list.generic.four-in-row LI:nth-last-child(4) > .inner-cut.vertical .shadow,
		.box-list.generic.three-in-row LI:nth-last-child(1) > .inner-cut.vertical .shadow,
		.box-list.generic.three-in-row LI:nth-last-child(2) > .inner-cut.vertical .shadow,
		.box-list.generic.three-in-row LI:nth-last-child(3) > .inner-cut.vertical .shadow {
			background-color: transparent;
			background-image: 
				-webkit-gradient(
					linear, left top, left bottom, 
					color-stop(0%, #909090), 
					color-stop(95%, rgba(128, 128, 128, 0)));	
		}
		.box-list.generic.five-in-row LI:nth-last-child(1) > .inner-cut.vertical .highlight,
		.box-list.generic.five-in-row LI:nth-last-child(2) > .inner-cut.vertical .highlight,
		.box-list.generic.five-in-row LI:nth-last-child(3) > .inner-cut.vertical .highlight,
		.box-list.generic.five-in-row LI:nth-last-child(4) > .inner-cut.vertical .highlight,
		.box-list.generic.five-in-row LI:nth-last-child(5) > .inner-cut.vertical .highlight,
		.box-list.generic.four-in-row LI:nth-last-child(1) > .inner-cut.vertical .highlight,
		.box-list.generic.four-in-row LI:nth-last-child(2) > .inner-cut.vertical .highlight,
		.box-list.generic.four-in-row LI:nth-last-child(3) > .inner-cut.vertical .highlight,
		.box-list.generic.four-in-row LI:nth-last-child(4) > .inner-cut.vertical .highlight,
		.box-list.generic.three-in-row LI:nth-last-child(1) > .inner-cut.vertical .highlight,
		.box-list.generic.three-in-row LI:nth-last-child(2) > .inner-cut.vertical .highlight,
		.box-list.generic.three-in-row LI:nth-last-child(3) > .inner-cut.vertical .highlight {
			background-color: transparent;
			background-image: 
				-webkit-gradient(
					linear, left top, left bottom, 
					color-stop(0%, #fff), 
					color-stop(95%, rgba(255, 255, 255, 0)));
		}	
	
	/* Five items per row */
	.box-list.generic.five-in-row {
	}
		.box-list.generic.five-in-row LI {
			width: 20%;
		}
			/* Hide horizontal cuts from the last row */
			.box-list.generic.five-in-row LI:nth-last-child(1) > .inner-cut.horizontal,
			.box-list.generic.five-in-row LI:nth-last-child(2) > .inner-cut.horizontal,
			.box-list.generic.five-in-row LI:nth-last-child(3) > .inner-cut.horizontal,
			.box-list.generic.five-in-row LI:nth-last-child(4) > .inner-cut.horizontal,
			.box-list.generic.five-in-row LI:nth-last-child(5) > .inner-cut.horizontal { display: none; }
		
			/* Hide vertical cuts from the last column */
			.box-list.generic.five-in-row LI:nth-child(5n) > .inner-cut.vertical { display: none; }
	
	/* Four items per row */
	.box-list.generic.four-in-row {
	}
		.box-list.generic.four-in-row LI {
			width: 25%;
		}
			/* Hide horizontal cuts from the last row */
			.box-list.generic.four-in-row LI:nth-last-child(1) > .inner-cut.horizontal,
			.box-list.generic.four-in-row LI:nth-last-child(2) > .inner-cut.horizontal,
			.box-list.generic.four-in-row LI:nth-last-child(3) > .inner-cut.horizontal,
			.box-list.generic.four-in-row LI:nth-last-child(4) > .inner-cut.horizontal { display: none; }
		
			/* Hide vertical cuts from the last column */
			.box-list.generic.four-in-row LI:nth-child(4n) > .inner-cut.vertical { display: none; }
	
	/* Three items per row */
	.box-list.generic.three-in-row {
	}
		.box-list.generic.three-in-row LI {
			width: 33%;
		}
			/* Hide horizontal cuts from the last row */
			.box-list.generic.three-in-row LI:nth-last-child(1) > .inner-cut.horizontal,
			.box-list.generic.three-in-row LI:nth-last-child(2) > .inner-cut.horizontal,
			.box-list.generic.three-in-row LI:nth-last-child(3) > .inner-cut.horizontal { display: none; }
		
			/* Hide vertical cuts from the last column */
			.box-list.generic.three-in-row LI:nth-child(3n) > .inner-cut.vertical { display: none; }
		
	/* Two items per row */
	.box-list.generic.two-in-row {
	}
		.box-list.generic.two-in-row LI {
			width: 50%;
		}
			/* Hide horizontal cuts from the last row */
			.box-list.generic.two-in-row LI:nth-last-child(1) > .inner-cut.horizontal,
			.box-list.generic.two-in-row LI:nth-last-child(2) > .inner-cut.horizontal 
			{ display: none; }
		
			/* Hide vertical cuts from the last column */
			.box-list.generic.three-in-row LI:nth-child(2n) > .inner-cut.vertical { display: none; }
			
	/* Links */
	.box-list.generic.links LI {
		height: 70px;
	}	
		.box-list.generic.links LI A {
			color: #252525;
			font-size: 24px;
			text-align: center;
			text-decoration: none;
			display: block;
			line-height: 70px;
		}

/************************************************************************************************************
	PLAIN
 ************************************************************************************************************/
 .box-list.plain {
 }
	.box-list.plain LI {
		width: 100%;
		height: auto;
	}

/************************************************************************************************************
	BUTTON GOTO
 ************************************************************************************************************/
 .button-goto { 	
 	/* Text */
 	color:#fff;
 	font-weight:bold;
 	font-size:26px;
 	line-height:68px;
 	text-align:center;
 	text-decoration:none;
 	text-shadow: #000000 0px -1px 1px;
 	
 	/* Box */
 	display:block;
 	border:1px solid #2b2b2b;
 	border-radius:6px;
 	background-image:
 		-webkit-gradient(
 			linear, 0% 0%, 0% 100%, 
 			from(#323232), 
 			to(#262626), 
 			color-stop(.6,#333333));
 	
 	-webkit-box-shadow: 
            0 5px 15px -4px rgba(0, 0, 0, 0.6);
 }
	.button-goto .play {
		display:inline-block;
        width: 47px; height: 47px;
        position:relative;
        top:13px; right:auto;
        background: url(../images/layout/box-list/button-more-right.png) no-repeat;
        background-size: 100%;
	}
	 

/************************************************************************************************************
	INNER BANNER
 ************************************************************************************************************/
.inner-banner {
	display:block;
	width:90%; height:100px;
	margin:0px auto 20px;		
	background:
		url(../images/layout/header/texts/appstore.png) no-repeat right center,		
 		-webkit-gradient(
 			linear, 0% 0%, 0% 100%, 
 			from(#323232), 
 			to(#262626), 
 			color-stop(.6,#333333));
	background-size:100%;
	border:1px solid #8b8b8b;
	border-radius:10px;
	-webkit-box-shadow: 0 1px 1px 0px rgba(0, 0, 0, 0.6);
}

/************************************************************************************************************
	SEARCH BOX (currently only in appstore but it seems generic enough to be changed later...)
 ************************************************************************************************************/
 .search {
 	/*width: 453px; height: 47px;*/
 	width: 620px; height: 64px;
 	margin: 0 auto 50px auto;
 }
	.search INPUT[type="text"] {
		width: 556px; height: 64px;
		display: block;
		float: right;
		border: 0;
		background: url(../images/layout/search.png) right 0;
		background-size: 117%;
		text-indent: 20px;
		font-size: 30px;
		color: #111;
	}
	
	.search INPUT[type="button"] {
		width: 60px; height: 64px;
		display: block;
		float: right;
		border: 0;
		background: url(../images/layout/search.png);
		background-size: 1090%;
	}


/************************************************************************************************************
	WIDE LIST
	The news page's featured content contains a type of list which was call "wide".
	It inherits the box-list design with some differences.
    Currently this type of list is only used in the homepage, hence is placed in here.
	If this is changed, move the following definitions to a common area in this css file
	(typically under box-list).
 ************************************************************************************************************/	
.wide-list {
}
.wide-list > UL {
	background-image: 
		-webkit-gradient(
			linear, left top, left bottom, 
			color-stop(0%, #e0e0e0), 
			color-stop(100%, #c9c9c9));
}
		
.wide-list > UL > LI {
	float: none;
	width: auto;
	height: auto;
	padding:25px 0 1px; /* To prevent margin-collapse */		
	background-image: 
		-webkit-gradient(
			linear, left top, 80 40%, 
			color-stop(0%, rgba(255, 255, 255, 0.5)), 
			color-stop(100%, rgba(255, 255, 255, 0)));
}	
	
	.wide-list > UL > LI .cut .shadow {
		width: 100%; height: 2px;
		top: auto; bottom: 2px; left: 0;
		background-image: 
			-webkit-gradient(
				linear, left top, right top, 
				color-stop(5%, rgba(103, 103, 103, 0)), 
				color-stop(50%, rgba(103, 103, 103, 1)), 
				color-stop(95%, rgba(103, 103, 103, 0)));
	}
	.wide-list > UL > LI .cut .highlight {
		width: 100%; height: 2px;
		top: auto; bottom: 0; left: 0;
		background-image: 
			-webkit-gradient(
				linear, left top, right top, 
				color-stop(5%, rgba(255, 255, 255, 0)), 
				color-stop(50%, rgba(255, 255, 255, 1)), 
				color-stop(95%, rgba(255, 255, 255, 0)));
	}
		
	.wide-list > UL > LI:first-child {
		border-top-left-radius: 10px;
	}
		
	.wide-list > UL > LI:last-child {
		border-bottom-left-radius: 10px;
	}	
	
.wide-list .thumb {
	float: right;
	width: 22%;
	margin: 7px 5% 37px 25px;
}
		
.wide-list .text {
	text-align: right;
}				
			
	.wide-list .text.info {		
		color:inherit;
		text-align:right;
		margin:0;
		padding:0px 38px 30px;
	}
	.wide-list .text a {
		font-weight:bold;
		color:#000;
		text-decoration:none;
	}
			
	.wide-list .text {
		margin-left: 30px;
	}
			
/* Buttons in Wide-List */
.wide-list .button {			
	position:static;	
	float:left;
	width:auto !important;	
	margin:20px 0 25px 20px;
	min-width:10%;
	padding:0 30px;
}
	.wide-list .button-orange {			
		color:#fff;
		text-shadow: -1px -1px 1px rgba(8, 8, 8, 1);
		border:1px solid #ffb35b;
		background-image:
			-webkit-gradient(
				linear, left top, left bottom, 
				color-stop(0%, #ff8c3f), 
				color-stop(100%, #eb782a));
	}	
	.wide-list .button-orange.large,
	.wide-list .button-orange:first-child {
		float:none;
		display:block;
		position:static;
		width:35% !important;
		margin:0px auto 25px;
	}
								

/************************************************************************************************************
	DARK LIST	
 ************************************************************************************************************/				
/* Dark-List */
.dark-list {
}
	/* Cuts */
	.dark-list .cut.horizontal .shadow {
		background-image: 
			-webkit-gradient(
				linear, left top, right top, 
				color-stop(5%, rgba(20, 20, 20, 0)), 
				color-stop(50%, rgba(20, 20, 20, 1)), 
				color-stop(95%, rgba(20, 20, 20, 0)));
		height: 2px;
			
	}
	.dark-list .cut.horizontal .highlight {
		background-image: 
			-webkit-gradient(
				linear, left top, right top, 
				color-stop(5%, rgba(255, 255, 255, 0)), 
				color-stop(50%, rgba(255, 255, 255, 0.2)), 
				color-stop(95%, rgba(255, 255, 255, 0)));
		height: 2px;
	}
	.dark-list .cut.horizontal .shadow:nth-child(2) {
		top: auto;
		bottom: 77px;
	}
	.dark-list .cut.horizontal .highlight:nth-child(4) {
		display: none;
	}
		
	/* List */
	.dark-list > UL {			
		border: 0;			
		background-color:transparent;			
		background-image: 
			-webkit-gradient(
				linear, left top, left bottom, 
				color-stop(0%, #606060), 
				color-stop(100%, #494949));
	}
		
		/* List item */
		.dark-list > UL > LI {
			background: transparent;
			height: auto;
			padding-top: 20px;
			width: 30%;
			position:relative;
			right:5%;				
		}				
		
			.dark-list > UL > LI .thumb {
				height: 152px;
			
				background-image: 
					-webkit-gradient(
						linear, left top, left bottom, 
						color-stop(0%, #a1a1a1), 
						color-stop(100%, #474747));
			}
		
			.dark-list > UL > LI .text {
				margin-bottom: 25px;
				color: #fff;
			}

	
/************************************************************************************************************
	HIGHLIGHT LIST (Wide list with big thumb)
 ************************************************************************************************************/
 /* List item */
.highlight-list > UL > LI {					
	background-image: none;
	height:380px;
}
	.highlight-list .text.title {
		color:#ff6600;
		font-size:52px;
		font-weight:normal;
		line-height:1;
		margin-bottom:10px;
	}
	.highlight-list .thumb {
		width:38%;
		height:293px;
		background: -webkit-gradient(linear, 0% 68%, 0% 100%, from(#a5a5a5), to(#4c4c4c));
		-webkit-box-shadow: 0 2px 12px -4px rgba(0, 0, 0, 1);


	}
		.box-list.highlight-list .thumb .play {
			width:130px; height:130px;
			margin:-65px -65px 0 0;
			/*	Anchor should now be bigger than .thumb */
			width:100%; height:100%;
			margin:0;
/*			background-size:15%;
			background-position:81% 46%;*/
		}
		
		.box-list.highlight-list .thumb .play-button {
		    background-image: url(../images/layout/box-list/button-play-big.png);
		    height: 295px;
		    margin: 34px 38px 0 0; /* top & right distance from edges of our UL - closest ancestor with position: relative */
		    width: 297px;
		}
		
/* Design cuts: */
 .highlight-list .cut.horizontal .shadow {
 	top:0;
 	height:2px; 	
 	background-image:
 		-webkit-gradient(
			linear, left top, right top, 
			color-stop(10%, rgba(154, 154, 154, 0)), 
			color-stop(20%, rgba(36, 36, 36, 1)), 
			color-stop(80%, rgba(36, 36, 36, 1)), 
			color-stop(90%, rgba(154, 154, 154, 0))); 	
 }
 .highlight-list .cut.horizontal .highlight {
 	top:2px;
 	background-image: 
		-webkit-gradient(
			linear, left top, right top, 
			color-stop(0%, rgba(254, 254, 254, 0)), 
			color-stop(15%, rgba(255, 255, 255, 1)), 
			color-stop(85%, rgba(255, 255, 255, 1)), 
			color-stop(100%, rgba(254, 254, 254, 0)));
 }

/************************************************************************************************************
	BUTTON MORE ANIMATION
************************************************************************************************************/	
.box-list > ul.slideDown {
}
.box-list > ul > li.more {
	height:0;
	opacity:0;
	overflow:hidden;
	-webkit-transition: all 1s ease;
}
.box-list > ul.slideDown > li.more {	
	height:auto;
	opacity:1;
	overflow:visible;
	-webkit-transition: all 1s ease;
}

/************************************************************************************************************
	HOME PAGE
 ************************************************************************************************************/
.page-home {
}	

	/* Featured content */
	.page-home .featured-content .box-list {	
		
	}
	
		/* Each box list's header has a different glow size (depends on the text lengths). */	
		
		.page-home .featured-content .box-list:nth-child(2) H2 .glow {
			background-image: 
				-webkit-gradient(
					radial, 
					88% -100%, 0, 
					88% -100%, 140, 
					from(rgba(140, 140, 140, 1)), to(rgba(116, 116, 116, 0))
				);
		}		
		
		.page-home .featured-content .box-list:nth-child(3) H2 .glow {
			background-image: 
				-webkit-gradient(
					radial, 
					90% -100%, 0, 
					90% -100%, 140, 
					from(rgba(140, 140, 140, 1)), to(rgba(116, 116, 116, 0))
				);
		}	
	
	/* Sub navigation */
	.page-home #sub-nav {
	}
		.page-home #sub-nav LI:nth-child(2) {
			width: 240px;
		}
		
		.page-home #sub-nav .inner-cut .shadow,
		.page-home #sub-nav .inner-cut .highlight {
			right: 160px !important;
		}
	
/************************************************************************************************************
	NEWS PAGE
 ************************************************************************************************************/

.page-news .wide-list .thumb .play_button {
	background-size:10%;
    height: 293px;
    width: 293px;
}

/************************************************************************************************************
	TV PAGE
 ************************************************************************************************************/
 .page-tv {
 }	
	.page-tv .header-peek {
		background-size:110%;
		background:
			url(../images/layout/header/texts/tv.png) no-repeat -35px 240px,
			-webkit-gradient(
				linear, left top, left bottom, 
				color-stop(0%, rgba(46, 46, 46, 0)), 				 
				color-stop(100%, rgba(40, 40, 40, 1)));
	}
	.page-tv .header-peek.anim {
		background:none;
	}
	.page-tv .box-list.generic .thumb .play {
		background-position:center 18%;
	}		
	
/* List item */
.page-tv .box-list.with-button > UL > LI {					
	background-image: none;
	height:455px;
}
	.page-tv .box-list.with-button > UL > LI:nth-child(6) {
		border-bottom-left-radius: 10px;
	}
		
 /************************************************************************************************************
	CHANNELS PAGE
 ************************************************************************************************************/		  
.page-channels .header-peek {
	background-size:110%;
	background:
		url(../images/layout/header/texts/tv.png) no-repeat -35px 240px,
		-webkit-gradient(
			linear, left top, left bottom, 
			color-stop(0%, rgba(46, 46, 46, 0)), 				 
			color-stop(100%, rgba(40, 40, 40, 1)));
}
.page-channels .header-peek.anim {
	background:none;
}
.page-channels .box-list .text {
	font-size:32px;
}
.page-channels .dark-list > UL {
 	padding-top:1em;
 	padding-bottom:2em;
 	background-image:
 		-webkit-gradient(
			linear, left top, left bottom, 
			from(#757575), to(#5e5e5e));
}
	.page-channels .dark-list > UL > LI {
		padding-top:0;
	}
 
.page-channels .dark-list .cut.horizontal .shadow:nth-child(2) {
	top:auto;
 	bottom:1px;
}
.page-channels .dark-list .cut.horizontal .highlight:nth-child(2) {
 	top:auto;
 	bottom:0px;
}

 /************************************************************************************************************
	PRICELIST PAGE
 ************************************************************************************************************/
.page-pricelist .wide-list > UL > LI {
	padding:10px 10px 10px;
}
	.page-pricelist .wide-list > UL > LI:first-child {
		padding-top:30px;
	}
	.page-pricelist .wide-list > UL > LI:last-child {
		padding-bottom:30px;
	}
		.page-pricelist .wide-list .text.title {
			padding-top:0;
		}
		.page-pricelist .wide-list .text.details {
			float:right;
		}
		.page-pricelist .wide-list .text.price {
			float:left;
		}	
		
 /************************************************************************************************************
	ITEM PAGE
 ************************************************************************************************************/
 .page-item {
 }
	.page-item .wide-list .text {
		margin-right:38px;
	}
		.page-item .wide-list .text.info {
			padding-bottom:0;
			padding-right:0;
		}		

.promo {
	margin-bottom: 30px;
}		
	.promo img {
		width: 100%;
		/*height: 100%;*/
		border-radius: 5px;		
	}
		
 /************************************************************************************************************
	APPSTORE PAGE
 ************************************************************************************************************/	 
.page-appstore .header-peek {
	background-size:110%;
	background:
		url(../images/layout/header/texts/appstore.png) no-repeat -43px 240px,
		-webkit-gradient(
			linear, left top, left bottom, 
			color-stop(0%, rgba(46, 46, 46, 0)), 				 
			color-stop(100%, rgba(40, 40, 40, 1)));
}
.page-appstore .header-peek.anim {
	background:none;
}

/************************************************************************************************************
	APPSTORE CATEGORY PAGE
 ************************************************************************************************************/	 
.page-appstore-category .header-peek {
	background-size:110%;
	background:
		url(../images/layout/header/texts/appstore.png) no-repeat -43px 240px,
		-webkit-gradient(
			linear, left top, left bottom, 
			color-stop(0%, rgba(46, 46, 46, 0)), 				 
			color-stop(100%, rgba(40, 40, 40, 1)));
}
.page-appstore-category .header-peek.anim {
	background:none;
}

.page-appstore-category .wide-list .text.info {
	color:#333333;
	padding:0px 30px 30px;
	text-align:center;
}
		
 /************************************************************************************************************
	APPSTORE ITEM PAGE
 ************************************************************************************************************/		
 .page-appstore-item {
 }	 			
	
	.page-appstore-item #combo.wide-list > UL > LI:nth-last-child(2) {
		padding-top:0;
	}
	.page-appstore-item #combo.wide-list > UL > LI:nth-last-child(1) {
		padding-top:10px;
	}
	
	/*Button orange*/
	.page-appstore-item .button-orange {
		float: right;
		display: block;
		position: static;
		width: 35% !important;
		margin: 0px auto 25px;
	}
	
	.page-appstore-item .wide-list li:first-child .button-orange {
		margin: 10px 25px 25px 0;
	}
		
	/* Images carousel */
	#images {
		overflow-x:hidden;
	}
	#images .top-shadow,
	#images .bottom-shadow {
		-webkit-box-shadow:0px 0px 15px 5px rgba(0, 0, 0, 0.5);
		width:100%; height:0px;
		position:relative; z-index:1;
	}	
	#images .carousel {
		position: relative;
		height: 500px;
		padding:30px 0 20px;
		background:#adadad;		
	}		
		
		#images .carousel .arrow-next {
			width: 56px; height: 55px;
			position: absolute; top: 220px; left: 36px;
			background: url(../images/layout/appstore/arrows.png) 0 0 no-repeat;
			/* Temporary enlarge: */
			-webkit-transform: scale(2) translateX(14px);
		}
		
		#images .carousel .arrow-prev {
			width: 56px; height: 55px;
			position: absolute; top: 220px; right: 36px;
			background: url(../images/layout/appstore/arrows.png) -56px 0 no-repeat;
			/* Temporary enlarge: */
			-webkit-transform: scale(2) translateX(-14px);
		}
		
		#images .carousel .arrow-next.disabled,
		#images .carousel .arrow-prev.disabled {
			opacity: 0.3;
			cursor:default;
		}
		
		#images .carousel .frame {
			width: 560px; height: 500px;
			position: relative; top: 0; right: 106px;
			overflow: hidden;
			/* Temporary enlarge: */
			width:354px;
			right:204px;
		}
		
		#images .carousel UL {
			position: absolute;
			top: 0;
			white-space: nowrap;
			-webkit-transition: -webkit-transform .2s ease-in-out; 
		}
		
			#images .carousel UL LI {
				float: right;
				width: 560px; height: 500px;
				padding: 72px 0px 0px; 
				right: auto;
				/* Temporary enlarge: */
				width:354px;
			}
		
				#images .carousel UL LI IMG {
					margin: auto;
					display: block;
					-webkit-transform: scale(1.37);
					-webkit-box-shadow: 0px 0px 10px #000;
				}				


/************************************************************************************************************
	UGLY WORKAROUND FOLLOWS: need to merge with tapuz's css
 ************************************************************************************************************/
.new-grid {
	background: none;
	background-color: #252525;
}
.new-grid #footer .footer-inner {
	background: none;
}
/************************************************************************************************************
	BOX LIST (list with header, footer, one item per row)
 ************************************************************************************************************/

.new-grid .new-box-list {	
/*
	border-radius: 11px;
*/
	position: relative;
	margin-bottom: 3em;

/*
	background-image: 
		-webkit-gradient(
			linear, left top, left bottom, 
			color-stop(0%, #e0e0e0), 
			color-stop(100%, #c9c9c9));
*/
	border-radius: 6px;		
/*
	border: 1px solid #8b8b8b;
*/

	margin-top: -1em;	
	position: relative;
	z-index: 2;
	font-size: 0.8em;
}		
	/* Header */
	.new-grid .new-box-list>H2 {
		background-image: 
				url("../images/layout/box-list/edges/title-right.png"),
				url("../images/layout/box-list/edges/title-left.png"),
				url("../images/layout/box-list/edges/title-bg.png");
		background-repeat: no-repeat, no-repeat, no-repeat;
		background-position: center right, center left, center top;
		background-size: auto 100%, auto 100%, 100% 100%;
		
		color: white;	
		font-size: 200%;
		height: 2.7em;
		line-height: 2.7em;
		margin-left: 0;
		overflow: hidden;
		padding: 0 4.4% 0.3em 0;
	}
		
		
	.new-grid .new-box-list>.grid, .new-grid .new-box-list>UL {
		background-image: 
			-webkit-gradient(
				linear, left top, left bottom, 
				color-stop(0%, #e0e0e0), 
				color-stop(100%, #c9c9c9));
	}
	
	.new-grid .new-box-list UL {
		z-index: 100;
		position: relative;
		border-radius: 10px;
	}
		.new-grid .new-box-list>UL>LI, .new-grid .new-box-list>.grid>UL>LI {
			float: right;
			/* padding-top: 1.5em; */
			position: relative;
		}
			/* Play link */
			.new-grid .new-box-list>UL>LI>.play {
				display: block;
				height: 100%;
				margin:0;
				position: absolute;
				top:0; right: 0;
				width: 100%; 
			}
			
			.new-grid .noplay>A {
				background:none !important;
			}
			
			/* Thumbnail */
			.new-grid .with-side-thumb LI,
			.new-grid LI.with-side-thumb {
				min-height: 13em;
				padding-right: 16em !important; /* thumb width and a little padding */
			}
			.new-grid .with-side-thumb LI .thumb,
			.new-grid LI.with-side-thumb .thumb {
				position: absolute;
				right: 2em;
				top: 2em;
			}
			.new-grid .with-top-thumbs LI {
				height: 28em;
			}
						
			.new-grid .thumb {
				background: -webkit-gradient(linear, 0% 68%, 0% 100%, from(#bfbfbf), to(#fafafa));
				border-radius: 0.7em;
				height: 12em;
				margin: 0.6em auto 0.3em auto;
				padding: 0.1em;
				position: relative;
				width: 12em;
			}			
				.new-grid .new-box-list .thumb IMG  {
					border-radius: 0.7em;
					height: 100%;
				}
			
					/* Play button (just an element with the image) */
					.new-grid .new-box-list .thumb .play-button {
					    background: url(../images/layout/box-list/button-play.png) no-repeat center;
					    background-size: 35%;
					    display: block;
					    height: 100%;
					    position: absolute;
					    right: 0;
					    top: 0;
					    width: 100%;
					}
					.new-grid #shows .play-button,
					.new-grid #video .play-button {
						background-size: 55%;
					}
					.new-grid .noplay>.thumb>.play-button {
						visibility: hidden;
					}
			/* Texts */
			.new-grid .new-box-list LI>.content {
				float: right;
			}
			.new-grid .new-box-list .text {
				font-size: 220%;
				color: #111111;

				margin: 0;

				text-align: center;
				line-height: normal;
				display: block;
			}
				.new-grid .text.orange {
					color:#ff6600;
				}

				.new-grid .new-box-list .text.title,
				.new-grid .new-box-list H3 {
					font-size: 220%;
					line-height: 1em;
					margin-bottom: 0.2em;
				}
				.new-grid .new-box-list .text.title.large {
					font-size: 300%;
				}

				.new-grid .new-box-list .text.price {
					display: inline;
					float: right;
				}
						
				
	
	/* Footer */
	.new-grid .new-box-list .footer {
		background: url("../images/layout/shadow-on-box-footer.png") repeat-x center 0;
		background-size: auto 100%;
		border-radius: 7px;
		color: #252525;
		font-weight: bold;
		font-size: 200%;
		height: 2.9em; 
		line-height: 2.9em;
		margin-top: -0.5em;
		padding-top: 0.5em;
		position: relative;
		text-align: left;
		z-index: 1;
	}	
		.new-grid .new-box-list .footer .button-more {			
			background:none;
			color:inherit;
			display:inline-block;
			float:left;
			margin-left:3%;
			text-decoration:none;
			width:97%;
		}
				    
			.new-grid .new-box-list .footer .button-more .play {
				background: url(../images/layout/box-list/button-more.png) no-repeat center;
				background-size: 73%;
				display:inline-block;
				height: 2.7em;
				margin-bottom: 0.4em;
				vertical-align: middle;
				width: 2.7em;
			}
			
	.new-grid .new-box-list .footer-down {
		text-align:center;
	}
		.new-grid .new-box-list .footer-down .button-more {			
			float:none;			
			margin:0;
		}
			.new-grid .new-box-list .footer-down .button-more .play {			
				background: url(../images/layout/box-list/button-more-down.png) no-repeat center;								margin: 0;		
			}



/************************************************************************************************************
	SQUARES
 ************************************************************************************************************/
.new-grid .new-box-list.squares {
}
	.new-grid .new-box-list.squares>UL>LI {
		background: transparent;
		height: auto;
		padding-top: 20px;
		width: 30%;
		position:relative;
		right:5%;
	}
	
		.new-grid .new-box-list.squares>UL>LI:nth-last-child(1),
		.new-grid .new-box-list.squares>UL>LI:nth-last-child(2),
		.new-grid .new-box-list.squares>UL>LI:nth-last-child(3) {
			margin-bottom: 40px;
		}
	
		.new-grid .new-box-list.squares>UL>LI .thumb {
			height: 151px;
			
			background-image: 
				-webkit-gradient(
					linear, left top, left bottom, 
					color-stop(0%, #a1a1a1), 
					color-stop(100%, #474747));
		}

		.new-grid .new-box-list.squares>UL>LI .thumb {		
			height: 13.95em;
		}
		
/************************************************************************************************************
	GENERIC BOX LIST - Links are smaller.
 ************************************************************************************************************/			
 
 .new-grid .new-box-list.generic>.grid {
	font-size: 2em;
	line-height: 2.9em;
	background: none;
	border-radius: 6px;
 }
 .new-grid .new-box-list.generic /* .content */ {
 	background: url(../images/layout/generic-box-list-bg.png) repeat-x center;
 	
 	background-size: 100% 100%;
 }
 

.new-grid .new-box-list.generic#main-nav , 
.new-grid .new-box-list.generic#sub-categories  {
 	background: none;
 }

	.new-grid .new-box-list.generic LI {
		padding-top: 0;
	}
	/* Links */
	.new-grid .new-box-list.generic.links LI>A {
		color: #252525;
		display: block;
		text-align: center;
		text-decoration: none;
	}
	.new-grid .new-box-list.generic.links>.grid>.horizontal-cut-space>.cut {
		margin-top: 2.9em;
	}

				
/************************************************************************************************************
	CUTS SYSTEM
 ************************************************************************************************************/		

.new-grid .cut-space {
	height: 100%;
	position: absolute; top: 0; right: 0;
	width: 100%;
	z-index: 3;
}
	.new-grid .cut {
		background-image: url(../images/layout/horizontal-cut.png);
		background-repeat: no-repeat;
		background-position: center;
		background-size: 100% 100%;
		display: block;
		position: relative;
		
		/* horizontal (default) */
		height: 2px;
		width: 100%;
	}
	/* vertical */
	.new-grid .vertical-cut-space>.cut {
		background-image: url(../images/layout/vertical-cut.png);
		background-repeat: no-repeat;
		background-position: center;
		float: right;
		height: 100%;
		margin-left: -2px;
		width: 2px;
	}
	
	.new-grid .top-cut {
		height: 2px;
		width: 100%;
		
		position: absolute;
		right: 0;
		top: 0;
	}
	.new-grid .bottom-cut {
		height: 2px;
		width: 100%;
		
		position: absolute;
		bottom: 0;
		right: 0;
	}
	
	/* NOTE: we need to set horizontal cuts' heights when we set the LIs' heights, per grid type */
	
	/* vertical cuts */
	.new-grid .grid-2col>.vertical-cut-space>.cut { margin-right: 50%; }
	.new-grid .grid-3col>.vertical-cut-space>.cut { margin-right: 33.3%; }
	.new-grid .grid-4col>.vertical-cut-space>.cut { margin-right: 25%; }
	.new-grid .grid-5col>.vertical-cut-space>.cut { margin-right: 20%; }


.new-grid .list-with-cuts>UL>LI {
	background-image: url(../images/layout/horizontal-cut.png);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: 100% 2px;
}


	
	
 /************************************************************************************************************
	GRID SYSTEM
 ************************************************************************************************************/		
.new-grid .grid, .new-grid .grid>.content {
	position: relative;
	z-index: 300; /* otherwise links won't be clickable */
}
.new-grid .grid>.content>LI { float: right; }
.new-grid .grid-2col>.content>LI { width: 50%; }
.new-grid .grid-3col>.content>LI { width: 33.3%; }
.new-grid .grid-4col>.content>LI { width: 25%; }
.new-grid .grid-5col>.content>LI { width: 20%; }


/************************************************************************************************************
	PAGE PROMO
 ************************************************************************************************************/
.page-promo .banner {
	height: 91px;
}

.page-promo .download-button {
	display: block;
	width: 225px;
	height: 56px;
	background: url("../Images/promo/button.png") 0 0 no-repeat;
	text-align: center;
	color: #fff;
	font-weight: bold;
	line-height: 55px;
	text-shadow: #cf5d14 1px 1px 1px;	
	text-decoration: none;
	margin: 1.3em auto;
}

.page-promo .banner {
	visibility: hidden;
}
.page-promo .header-inner .content {
	margin-top: -127px;
}
.page-promo .download-button {
	font-size: 1.6em;
	width: 302px;
	background-size: 100%;
	height: 72px;
	line-height: 72px;
	margin-bottom: 60px;
}
#lucky-links {	
	margin: 50px 0 50px;	
}
.page-promo #main-img,
.page-promo #title-img {
	display: block;
	margin: 0 auto;
}
.page-promo #title-img {
	margin-bottom: 40px;
}
.page-promo .featured-content p {
	font-size: 26px;
	color: #fff;
	text-align: center;
	margin: 1.3em auto;
	width: 85%;
}
.page-promo .featured-content p a {
	color: #ff6600;
	text-decoration: underline;
}
.page-promo h1 {
	margin: 0 auto;
	color: #ff6600;
	font-size: 40px;
	font-weight: normal;
	text-align: center;
}
/************************************************************************************************************
	BOOKSTORE
 ************************************************************************************************************/
 .page-bookstore .button-orange {
 	float: right;
 	text-shadow: 0px -1px 1px rgba(170, 69, 0, 0.85);
 	font-size: 19px;
 	padding: 0 80px;
 	margin-right: 35px;
 }
 .page-bookstore .thumb {
 	width: 18%;
 	height: 205px;
 	background: none;
 	padding: 0;
 	box-shadow:-10px 5px 30px #909090; 	
 }
	.page-bookstore .thumb img {
		border-radius: 0;
		box-shadow:10px -3px 30px #a0a0a0;
	}
 
 .page-bookstore .about-list .thumb {
 	width: 20%;
 	height: auto;
 	background: none;
 	padding: 0;
 	box-shadow:none; 	
 	border: 1px solid #9f9f9f;
 	border-radius: 0;
 }
	.page-bookstore .about-list .thumb img {
		display: block;
		border-radius: 0;
		box-shadow:none;
	}

.page-bookstore .about-list .details {
	width: 530px;
	padding-bottom: 30px;
}
.page-bookstore .quote-list .info {
	padding-bottom: 0;
}
.page-bookstore .quote-list .title {
	padding-bottom: 30px;
}

.page-bookstore .wide-list .text {	
	margin-right: 35px;
	margin-left: 10px;
	width: 465px;
}

.box-list .like {
	position: absolute;
	background: url("../Images/actionable.png") top left no-repeat;
	height: 1.2em;
	padding: 0 0 0 30px;
	top: 50%;
	margin-top: -20px;
	left: 0.7em;
	font-size: 24px;
	color: #3B5998;
}
.logos {
	margin-right: 25px;
}
	.logos li {
		float: right;	
		margin-left: 25px;
		padding-bottom: 25px;
	}
	
.page-bookstore h1 img {
	margin-top: 5px;
}

.bread-crumbs + .box-list {
	margin-top: 50px;
}

.featured-content > .button-orange {	
	display: block;
	position: static;	
	float: none;
	margin: 50px auto;
	line-height: 42px;		
	width: 150px !important;		
	color:#fff;	
	border:1px solid #ffb35b;
	background-image:
	-webkit-gradient(
		linear, left top, left bottom, 
		color-stop(0%, #ff8c3f), 
		color-stop(100%, #eb782a));		
	text-shadow: 0px -1px 1px rgba(170, 69, 0, 0.85);
	font-size: 19px;
	padding: 0 80px;	
}

/************************************************************************************************************
	XOOM WORKAROUNDS
 ************************************************************************************************************/
.wide-list .text {
	float:right;
	width: 500px;	
}
.wide-list .text.info {
	float: left;	
	text-align: right;
	width: 697px;	
}
.wide-list .thumb {
	margin-left: 0;
}